import { PlotUtils } from "./PlotUtils.js";
import { markerIcon, markerBlueIcon } from './icon.js'
import { createMarker } from './marker.js'

let PlotDemo = function (map) {
    this.map = map;
    this.plotLayer = L.layerGroup();
    this.map.addLayer(this.plotLayer);
    this.plotUtils = new PlotUtils(map);
    this.map.addEventListener("zoomend", e => {
        let zoom = map.getZoom();
        let scale = Math.pow(1.2, (zoom - 14));
        console.info(`scale=${scale}`);
        this.updateSvgIcon(this.angle2, scale);
    });
}

PlotDemo.prototype.create = function () {
    let points = [{ lng: 117.21068859, lat: 31.83490971 }, { lng: 117.22163200, lat: 31.82342421 }, { lng: 117.25029945, lat: 31.83108137 }]
    //let points = [{ lng: 117.21068859, lat: 31.83490971 }, { lng: 117.22163200, lat: 31.82342421 }, { lng: 117.25029945, lat: 31.83108137 }, { lng: 117.27931023,  lat: 31.83053445 }];
    let proPoints = this.plotUtils.proPoints(points);
    let proControlPoints = this.plotUtils.calculateBezierControlPoints(...proPoints);
    let curveProPoints = this.plotUtils.generateBezierCurve(proControlPoints);
    let curvePoints = this.plotUtils.unProPoints(curveProPoints);
    let latlngs = [];
    for (let curvePoint of curvePoints) {
        latlngs.push([curvePoint.lat, curvePoint.lng]);
    }

    let polyline = L.polyline(latlngs, { color: 'red' });
    //this.plotLayer.addLayer(polyline);

    this.createMarker(points, "点位",);

    this.createMarker(this.plotUtils.unProPoints([proControlPoints[1]]), "控制点", markerBlueIcon);

    // 切线
    let t = this.plotUtils.findT(curveProPoints, proPoints[1]);
    const angle = this.plotUtils.getQuadraticBezierPointAndTangent(...proControlPoints, t)
    let tangentLineProPoints = [angle.point, { x: angle.point.x + angle.tangent.x / 3, y: angle.point.y + angle.tangent.y / 3 }];
    let tangentLinePoints = this.plotUtils.unProPoints(tangentLineProPoints);
    latlngs = [];
    for (let curvePoint of tangentLinePoints) {
        latlngs.push([curvePoint.lat, curvePoint.lng]);
    }
    polyline = L.polyline(latlngs, { color: 'blue' });
    //this.plotLayer.addLayer(polyline);


    // 三次贝塞尔曲线
    points = [{ lng: 117.21068859, lat: 31.83490971 }, { lng: 117.22163200, lat: 31.82342421 }, { lng: 117.25029945, lat: 31.83108137 }, { lng: 117.27931023, lat: 31.83053445 }]
    proPoints = this.plotUtils.proPoints(points);
    proControlPoints = this.plotUtils.calculateCubicBezierControlPoints(proPoints);
    curveProPoints = this.plotUtils.cubicBezier(...proControlPoints);
    curvePoints = this.plotUtils.unProPoints(curveProPoints);
    latlngs = [];
    for (let curvePoint of curvePoints) {
        latlngs.push([curvePoint.lat, curvePoint.lng]);
    }
    polyline = L.polyline(latlngs, { color: '#ffff00' });
    //  this.plotLayer.addLayer(polyline);

    // 三次贝塞尔曲线2
    points = [{ lng: 117.22163200, lat: 31.82342421 }, { lng: 117.25029945, lat: 31.83108137 }, { lng: 117.27931023, lat: 31.83053445 }, { lng: 117.29501724, lat: 31.84898206 }]
    proPoints = this.plotUtils.proPoints(points);
    proControlPoints = this.plotUtils.calculateCubicBezierControlPoints(proPoints);
    curveProPoints = this.plotUtils.cubicBezier(...proControlPoints);
    curvePoints = this.plotUtils.unProPoints(curveProPoints);
    latlngs = [];
    for (let curvePoint of curvePoints) {
        latlngs.push([curvePoint.lat, curvePoint.lng]);
    }
    polyline = L.polyline(latlngs, { color: '#00ff00' });
    // this.plotLayer.addLayer(polyline);

    // 二次贝塞尔曲线2
    points = [{ lng: 117.25029945, lat: 31.83108137 }, { lng: 117.27931023, lat: 31.83053445 }, { lng: 117.29501724, lat: 31.84898206 }]
    proPoints = this.plotUtils.proPoints(points);
    proControlPoints = this.plotUtils.calculateBezierControlPoints(...proPoints);
    curveProPoints = this.plotUtils.generateBezierCurve(proControlPoints);
    curvePoints = this.plotUtils.unProPoints(curveProPoints);
    latlngs = [];
    for (let curvePoint of curvePoints) {
        latlngs.push([curvePoint.lat, curvePoint.lng]);
    }
    polyline = L.polyline(latlngs, { color: '#ff0099' });
    //this.plotLayer.addLayer(polyline);

    // 样条曲线
    points = [
        { lng: 117.21068859, lat: 31.83490971 },
        { lng: 117.22163200, lat: 31.82342421 },
        { lng: 117.25029945, lat: 31.83108137 },
        { lng: 117.27931023, lat: 31.83053445 },
        { lng: 117.29501724, lat: 31.84898206 },
        { lng: 117.29810715, lat: 31.81631342 },
    ]
    // points.reverse()
    proPoints = this.plotUtils.proPoints(points);
    //proControlPoints = this.plotUtils.calculateBezierControlPoints(...proPoints);
    curveProPoints = this.plotUtils.createSmoothCurve(proPoints);
    curvePoints = this.plotUtils.unProPoints(curveProPoints);
    latlngs = [];
    for (let curvePoint of curvePoints) {
        latlngs.push([curvePoint.lat, curvePoint.lng]);
    }
    polyline = L.polyline(latlngs, { color: '#ff0000', opacity: 0.8 });
    this.plotLayer.addLayer(polyline);

    // 切线
    // t = this.plotUtils.findT(curveProPoints, proPoints[1]);
    let angle2 = this.angle2 = this.plotUtils.getSplinePointAndTangent(curveProPoints, 0)

    if (Math.abs(angle2.dx) > Math.abs(angle2.dy)) {
        let c = Math.abs(1000 / angle2.dx);
        angle2.dx = angle2.dx * c;
        angle2.dy = angle2.dy * c;
    } else {
        let c = Math.abs(1000 / angle2.dy);
        angle2.dy = angle2.dy * c;
        angle2.dx = angle2.dx * c;
    }

    tangentLineProPoints = [{ x: angle2.x, y: angle2.y }, { x: angle2.x + angle2.dx, y: angle2.y + angle2.dy }];
    tangentLinePoints = this.plotUtils.unProPoints(tangentLineProPoints);
    latlngs = [];
    for (let curvePoint of tangentLinePoints) {
        latlngs.push([curvePoint.lat, curvePoint.lng]);
    }
    polyline = L.polyline(latlngs, { color: '#ffff00' });
    this.plotLayer.addLayer(polyline);

    this.createMarker(this.plotUtils.unProPoints([angle2]), "点位",);

    // 最后，展示点位
    this.createMarker(points, "点位",);

    let rotation = Math.atan(Math.abs(angle2.dy / angle2.dx));
    rotation = 180 * rotation / Math.PI;

    let transform = ``;
    let scale = 1;

    if (angle2.dx > 0 && angle2.dy > 0) {
        rotation = -rotation;
    } else if (angle2.dx > 0 && angle2.dy < 0) {
        rotation = rotation;
    }
    else if (angle2.dx < 0 && angle2.dy > 0) {
        rotation = 180 + rotation;
        transform = `transform: scale(${scale},-${scale}); transform-origin: center right;`;

    }
    else if (angle2.dx < 0 && angle2.dy < 0) {
        rotation = 180 - rotation;
        transform = `transform: scale(${scale},-${scale}); transform-origin: center right;`;
    }


    // 显示svg图标
    let svgIcon = L.divIcon({
        html: `
        <div style="width:144px; height:144px; background:transparent;">
        <svg width="72" height="72" viewBox="0 0 72 72" fill="none" style="margin-left:0; margin-top:36px; ${transform}" xmlns="http://www.w3.org/2000/svg">
        
        <rect x="8" y="20" width="56" height="28" stroke="#FF0000" stroke-width="2"/>
<path d="M59 20V48" stroke="#FF0000" stroke-width="2"/>
<path d="M7 53H65" stroke="#FF0000" stroke-width="2" stroke-linejoin="bevel"/>

        </svg>
        <div>
        `,
        // iconUrl: '../images/交通抢险队.svg',
        iconSize: [144, 144],  // 图标显示尺寸
        iconAnchor: [72, 72] // 图标锚点位置
    });
    this.svgMarker = L.marker(this.plotUtils.unProPoint(angle2), { icon: svgIcon })
    this.svgMarker.setRotationOrigin('50% 50%');
    this.svgMarker.setRotationAngle(rotation);
    this.plotLayer.addLayer(this.svgMarker);
}

PlotDemo.prototype.updateSvgIcon = function (angle2, scale) {
    let rotation = Math.atan(Math.abs(angle2.dy / angle2.dx));
    rotation = 180 * rotation / Math.PI;
    let strokeWidth = 2;
    strokeWidth = strokeWidth / scale;

    let transform = "";
    if (angle2.dx > 0 && angle2.dy > 0) {
        rotation = -rotation;
        transform = `transform: scale(${scale},${scale}); transform-origin: center right;`;
    } else if (angle2.dx > 0 && angle2.dy < 0) {
        rotation = rotation;
        transform = `transform: scale(${scale},${scale}); transform-origin: center right;`;
    }
    else if (angle2.dx < 0 && angle2.dy > 0) {
        rotation = 180 + rotation;
        transform = `transform: scale(${scale},-${scale}); transform-origin: center right;`;

    }
    else if (angle2.dx < 0 && angle2.dy < 0) {
        rotation = 180 - rotation;
        transform = `transform: scale(${scale},-${scale}); transform-origin: center right;`;
    }


    // 显示svg图标
    let svgIcon = L.divIcon({
        html: `
        <div style="width:144px; height:144px; background:transparent;">
        <svg width="72" height="72" viewBox="0 0 72 72" fill="none" style="margin-left:0; margin-top:36px; ${transform}" xmlns="http://www.w3.org/2000/svg">
        
        <rect x="8" y="20" width="56" height="28" stroke="#FF0000" stroke-width="${strokeWidth}"/>
<path d="M59 20V48" stroke="#FF0000" stroke-width="${strokeWidth}"/>
<path d="M7 53H65" stroke="#FF0000" stroke-width="${strokeWidth}" stroke-linejoin="bevel"/>

        </svg>
        <div>
        `,
        // iconUrl: '../images/交通抢险队.svg',
        iconSize: [144, 144],  // 图标显示尺寸
        iconAnchor: [72, 72] // 图标锚点位置
    });
    this.svgMarker.setIcon(svgIcon);
}

PlotDemo.prototype.createMarker = function (points, name, icon) {
    for (let [i, point] of points.entries()) {
        let id = i + 1;
        let marker = createMarker(point.lng, point.lat, {
            id: id,
            title: `${name}${id}`,
            icon: icon || markerIcon
        });
        this.plotLayer.addLayer(marker);
    }
}

export { PlotDemo }
